
<template>
  <div class="edit-down-textarea">
    <vxe-pulldown ref="xDown" class="edit-down-pulldown" transfer>
      <template>
        <vxe-input v-model="row[column.property]" class="edit-down-input" readonly @click="clickEvent" />
      </template>
      <template v-slot:dropdown>
        <div class="edit-down-wrapper">
          <vxe-textarea ref="xText" v-model="row[column.property]" class="edit-down-text" resize="none" maxlength="10000" show-word-count />
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>

export default {
  name: 'EditDownTextarea',
  props: {
    params: Object
  },
  data() {
    return {
      row: null,
      column: null
    }
  },
  watch: {
    params() {
      this.load()
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      const { row, column } = this.params
      this.row = row
      this.column = column
    },
    clickEvent() {
      this.$refs.xDown.showPanel().then(() => {
        this.$refs.xText.focus()
      })
    },
    suffixClick() {
      this.$refs.xDown.togglePanel()
    }
  }
}
</script>

<style lang="scss">

.vxe-textarea--inner{
  height: 200px;
}

.edit-down-pulldown {
  width: 100%;
}
.edit-down-wrapper {
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
.edit-down-text {
  min-width:500px;
  width: 100%;
  height: 200px;
  display: block;
}

</style>
